<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <script src="./scripts/checkLogin.js"></script>
    <title>My BCIT Project</title>
    <meta name="comp2800 template" content="My 2800 App">

    <!------------------------>
    <!-- Required meta tags -->
    <!------------------------>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!------------------------------------------>
    <!-- Bootstrap Library CSS JS CDN go here -->
    <!------------------------------------------>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-------------------------------------------------------->
    <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
    <!-------------------------------------------------------->
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

    <!-------------------------------------------->
    <!-- Other libraries and styles of your own -->
    <!-------------------------------------------->
    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <title>海洋保护团队 | BCIT项目</title>
    <meta name="comp2800 template" content="My 2800 App">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- 动画库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    
    <!-- 自定义CSS -->
    <style>
        body {
            background-color: #f0f8ff;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        .team-header {
            background: linear-gradient(rgba(0, 105, 148, 0.7), rgba(0, 105, 148, 0.7)), 
                        url('https://images.unsplash.com/photo-1439405326854-014607f694d7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            color: white;
            padding: 80px 0;
            text-align: center;
            margin-bottom: 30px;
        }
        .team-member {
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            overflow: hidden;
            transition: transform 0.3s;
        }
        .team-member:hover {
            transform: translateY(-10px);
        }
        .member-img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            border-bottom: 3px solid #006994;
        }
        .member-info {
            padding: 20px;
        }
        .member-name {
            color: #006994;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .member-role {
            color: #4a90e2;
            font-style: italic;
            margin-bottom: 15px;
        }
        .ocean-wave {
            height: 100px;
            width: 100%;
            background: url('https://i.imgur.com/JXQZQyQ.png') repeat-x;
            background-size: contain;
            animation: wave 15s linear infinite;
            position: relative;
            bottom: 0;
        }
        @keyframes wave {
            0% { background-position: 0 0; }
            100% { background-position: 1000px 0; }
        }

        
        .btn-outline-success {
            color: #006994;
            border-color: #006994;
        }
        .btn-outline-success:hover {
            background-color: #006994;
            color: white;
        }
    </style>
</head>

<body>
    <!------------------------------>
    <!-- Your HTML Layout go here -->
    <!------------------------------>

    <!-- our own navbar goes here -->
    <nav id="navbarPlaceholder"></nav>

    <!-- 团队介绍头部 -->
    <div class="team-header animate__animated animate__fadeIn">
        <div class="container">
            <h1 class="display-4">Our Marine Conservation Team</h1>
            <p class="lead">A group of professionals dedicated to protecting marine ecology and fighting pollution</p>
        </div>
    </div>

    <!-- 团队成员介绍 -->
    <div class="container">
        <div class="row">
            <!-- 成员1 -->
             
            <div class="col-md-4 col-sm-6 mb-4 animate__animated animate__fadeInUp" data-wow-delay="0.1s">
                <div class="team-member">
                    <img src="images/hhy (1).jpg" alt="Huang Wenyi" class="member-img">
                    <div class="member-info">
                        <h3 class="member-name">Huang Wenyi</h3>
                        <p class="member-role">Ocean Association President/Team Leader</p>
                        <p>Comrade Huang Wenyi has focused on the research of marine ecosystems for 15 years, has led a number of marine pollution control projects, and published more than 30 academic papers on marine protection.</p>
                        <nav id="navbarPlaceholder"></nav>


    

    <!-- the body of your page goes here -->
    <!-- stuff -->

    
    <template id="simple-history-card" class="card-body">
        <p class="info"> some text </p>
        </template>


                    </div>
                </div>
            </div>
            
            <!-- 成员2 -->
            <div class="col-md-4 col-sm-6 mb-4 animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                <div class="team-member">
                    <img src="images/dyx.jpg" alt="Deng Yuxuan" class="member-img">
                    <div class="member-info">
                        <h3 class="member-name">Deng Yuxuan</h3>
                        <p class="member-role">Vice-President/Environmental Engineer of the Marine Society</p>
                        <p>Comrade Deng Yuxuan used to work in the environmental protection department and was familiar with marine protection laws and regulations. He provided policy guidance to the team and drove the development of a number of marine protection bills.</p>
                        <nav id="navbarPlaceholder"></nav>


    

    
    
    <template id="simple-history-card" class="card-body">
        <p class="info"> some text </p>
        </template>
                    </div>
                </div>
            </div>
            
            <!-- 成员3 -->
            <div class="col-md-4 col-sm-6 mb-4 animate__animated animate__fadeInUp" data-wow-delay="0.3s">
                <div class="team-member">
                    <img src="images/yhl.jpg" alt="Yang Haolin" class="member-img">
                    <div class="member-info">
                        <h3 class="member-name">Yang Haolin</h3>
                        <p class="member-role">President of the Green Consumption Association</p>
                        <p>Comrade Yang Haolin conducted in-depth research on the relationship between green consumption and marine protection, and organized several beach clean-up activities with Zhang Junrong, inviting volunteers to clean up the garbage on the beach and promoting the concept of green consumption to the participants.</p>
                        <nav id="navbarPlaceholder"></nav>


    

  
    
    <template id="simple-history-card" class="card-body">
        <p class="info"> some text </p>
        </template>
                    </div>
                </div>
            </div>
            
            <!-- 成员4 -->
            <div class="col-md-4 col-sm-6 mb-4 animate__animated animate__fadeInUp" data-wow-delay="0.4s">
                <div class="team-member">
                    <img src="images/wgf.jpg" alt="Wang Guofeng" class="member-img">
                    <div class="member-info">
                        <h3 class="member-name">Wang Guofeng</h3>
                        <p class="member-role">Ombudsman</p>
                        <p>
                            Comrade Wang Guofeng has developed a variety of marine pollution monitoring equipment, and the "Haiqing" system he designed can detect the content of marine microplastics in real time, which has been deployed in many coastal cities.
                        </p>
                        <nav id="navbarPlaceholder"></nav>


    

    
    
    <template id="simple-history-card" class="card-body">
        <p class="info"> some text </p>
        </template>
                    </div>
                </div>
            </div>
            
            <!-- 成员5 -->
            <div class="col-md-4 col-sm-6 mb-4 animate__animated animate__fadeInUp" data-wow-delay="0.5s">
                <div class="team-member">
                    <img src="images/zjr.jpg" alt="Zhang Junrong" class="member-img">
                    <div class="member-info">
                        <h3 class="member-name">Zhang Junrong</h3>
                        <p class="member-role">Event planning</p>
                        <p>Comrade Zhang Junrong organized more than 100 beach clean-up activities and mobilized tens of thousands of volunteers to participate. He and Mr. Wang co-developed the "Clean Sea" app, which allows the public to report polluted sites.
                            </p>
                            <nav id="navbarPlaceholder"></nav>


    

    

    
    
    <template id="simple-history-card" class="card-body">
        <p class="info"> some text </p>
        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 海洋波浪动画 -->
    <div class="ocean-wave"></div>

    

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 动画JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
    <script>
        new WOW().init();
        
        // 图片懒加载效果
        document.addEventListener("DOMContentLoaded", function() {
            const teamMembers = document.querySelectorAll('.team-member');
            
            teamMembers.forEach(member => {
                member.addEventListener('mouseover', function() {
                    this.style.transform = 'translateY(-10px)';
                });
                
                member.addEventListener('mouseout', function() {
                    this.style.transform = 'translateY(0)';
                });
            });
        });
    </script>
    <!-- our own footer goes here-->
    <nav id="footerPlaceholder"></nav>

    <!---------------------------------------------->
    <!-- Your own JavaScript functions go here    -->
    <!---------------------------------------------->
    <script src="./scripts/skeleton.js"></script>
    <!-- <script src="./scripts/script.js"></script> -->
    <script src="./scripts/history.js"></script>

</body>
</html>